{% extends "base.html" %}

{% block title %}使用指南 - SurveyAnalyzer{% endblock %}

{% block breadcrumb %}
<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item">
            <a href="{{ url_for('main.index') }}">
                <i class="fas fa-home me-1"></i>
                首页
            </a>
        </li>
        <li class="breadcrumb-item active" aria-current="page">
            <i class="fas fa-question-circle me-1"></i>
            使用指南
        </li>
    </ol>
</nav>
{% endblock %}

{% block content %}
<div class="row">
    <div class="col-md-3">
        <div class="card">
            <div class="card-header">
                <h6 class="mb-0">目录</h6>
            </div>
            <div class="list-group list-group-flush">
                <a href="#getting-started" class="list-group-item list-group-item-action">
                    <i class="fas fa-play me-2"></i>快速开始
                </a>
                <a href="#data-upload" class="list-group-item list-group-item-action">
                    <i class="fas fa-upload me-2"></i>数据上传
                </a>
                <a href="#analysis" class="list-group-item list-group-item-action">
                    <i class="fas fa-chart-line me-2"></i>数据分析
                </a>
                <a href="#visualization" class="list-group-item list-group-item-action">
                    <i class="fas fa-chart-pie me-2"></i>数据可视化
                </a>
                <a href="#clustering" class="list-group-item list-group-item-action">
                    <i class="fas fa-project-diagram me-2"></i>聚类分析
                </a>
                <a href="#ai-analysis" class="list-group-item list-group-item-action">
                    <i class="fas fa-brain me-2"></i>AI分析
                </a>
                <a href="#faq" class="list-group-item list-group-item-action">
                    <i class="fas fa-question me-2"></i>常见问题
                </a>
            </div>
        </div>
    </div>
    
    <div class="col-md-9">
        <div class="card">
            <div class="card-body">
                <h1 class="mb-4">
                    <i class="fas fa-question-circle me-2"></i>
                    SurveyAnalyzer 使用指南
                </h1>
                
                <!-- 快速开始 -->
                <section id="getting-started" class="mb-5">
                    <h2><i class="fas fa-play me-2"></i>快速开始</h2>
                    <p>欢迎使用 SurveyAnalyzer！这是一个专业的问卷调查数据分析平台，帮助您快速分析和理解数据。</p>
                    
                    <div class="alert alert-info">
                        <h6><i class="fas fa-lightbulb me-2"></i>三步开始分析：</h6>
                        <ol class="mb-0">
                            <li>上传您的数据文件（CSV、Excel或JSON格式）</li>
                            <li>选择分析类型（统计分析、可视化、聚类等）</li>
                            <li>查看分析结果并导出报告</li>
                        </ol>
                    </div>
                </section>
                
                <!-- 数据上传 -->
                <section id="data-upload" class="mb-5">
                    <h2><i class="fas fa-upload me-2"></i>数据上传</h2>
                    <p>SurveyAnalyzer 支持多种数据格式，确保您的数据能够被正确识别和处理。</p>
                    
                    <h4>支持的文件格式</h4>
                    <ul>
                        <li><strong>CSV文件</strong>：逗号分隔值文件，最常用的数据交换格式</li>
                        <li><strong>Excel文件</strong>：支持 .xlsx 和 .xls 格式</li>
                        <li><strong>JSON文件</strong>：结构化数据文件</li>
                    </ul>
                    
                    <h4>数据要求</h4>
                    <ul>
                        <li>文件大小不超过 16MB</li>
                        <li>第一行应为列标题</li>
                        <li>数据应为结构化格式</li>
                        <li>避免合并单元格和复杂格式</li>
                    </ul>
                </section>
                
                <!-- 数据分析 -->
                <section id="analysis" class="mb-5">
                    <h2><i class="fas fa-chart-line me-2"></i>数据分析</h2>
                    <p>平台提供全面的统计分析功能，帮助您深入理解数据。</p>
                    
                    <h4>统计分析功能</h4>
                    <ul>
                        <li><strong>描述性统计</strong>：均值、中位数、标准差等基本统计量</li>
                        <li><strong>相关性分析</strong>：变量间的关联关系</li>
                        <li><strong>假设检验</strong>：t检验、卡方检验等</li>
                        <li><strong>回归分析</strong>：线性回归、逻辑回归</li>
                    </ul>
                </section>
                
                <!-- 数据可视化 -->
                <section id="visualization" class="mb-5">
                    <h2><i class="fas fa-chart-pie me-2"></i>数据可视化</h2>
                    <p>通过丰富的图表类型，让数据更加直观易懂。</p>
                    
                    <h4>图表类型</h4>
                    <div class="row">
                        <div class="col-md-6">
                            <ul>
                                <li>柱状图</li>
                                <li>饼图</li>
                                <li>散点图</li>
                                <li>折线图</li>
                            </ul>
                        </div>
                        <div class="col-md-6">
                            <ul>
                                <li>热力图</li>
                
                                <li>直方图</li>
                                <li>雷达图</li>
                            </ul>
                        </div>
                    </div>
                </section>
                
                <!-- 聚类分析 -->
                <section id="clustering" class="mb-5">
                    <h2><i class="fas fa-project-diagram me-2"></i>聚类分析</h2>
                    <p>使用K-means算法发现数据中的隐藏模式和群体特征。</p>
                    
                    <h4>K-means聚类</h4>
                    <ul>
                        <li><strong>算法特点</strong>：简单高效，适用于大多数聚类场景</li>
                        <li><strong>参数设置</strong>：可自定义聚类数量（2-20个）</li>
                        <li><strong>结果展示</strong>：提供可视化图表和详细统计信息</li>
                        <li><strong>质量评估</strong>：包含轮廓系数等评估指标</li>
                    </ul>
                </section>
                
                <!-- AI分析 -->
                <section id="ai-analysis" class="mb-5">
                    <h2><i class="fas fa-brain me-2"></i>AI智能分析</h2>
                    <p>利用人工智能技术，提供更深入的数据洞察。</p>
                    
                    <h4>AI功能</h4>
                    <ul>
                        <li><strong>自动分析</strong>：AI自动选择最佳分析方法</li>
                        <li><strong>智能报告</strong>：自动生成分析报告</li>
                        <li><strong>异常检测</strong>：识别数据中的异常值</li>
                        <li><strong>预测分析</strong>：基于历史数据进行预测</li>
                    </ul>
                </section>
                
                <!-- 常见问题 -->
                <section id="faq" class="mb-5">
                    <h2><i class="fas fa-question me-2"></i>常见问题</h2>
                    
                    <div class="accordion" id="faqAccordion">
                        <div class="accordion-item">
                            <h2 class="accordion-header" id="faq1">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse1">
                                    支持哪些数据格式？
                                </button>
                            </h2>
                            <div id="collapse1" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                                <div class="accordion-body">
                                    目前支持 CSV、Excel（.xlsx/.xls）和 JSON 格式的数据文件。
                                </div>
                            </div>
                        </div>
                        
                        <div class="accordion-item">
                            <h2 class="accordion-header" id="faq2">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse2">
                                    文件大小有限制吗？
                                </button>
                            </h2>
                            <div id="collapse2" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                                <div class="accordion-body">
                                    单个文件大小不能超过 16MB。如果文件过大，建议先进行数据预处理。
                                </div>
                            </div>
                        </div>
                        
                        <div class="accordion-item">
                            <h2 class="accordion-header" id="faq3">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse3">
                                    如何导出分析结果？
                                </button>
                            </h2>
                            <div id="collapse3" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                                <div class="accordion-body">
                                    在分析结果页面，您可以选择导出为 PDF、Excel 或 PNG 格式。
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
            </div>
        </div>
    </div>
</div>

<style>
.list-group-item-action:hover {
    background-color: #f8f9fa;
}

section {
    scroll-margin-top: 100px;
}

.accordion-button:not(.collapsed) {
    background-color: #e3f2fd;
    color: #1976d2;
}
</style>

<script>
// 平滑滚动
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function (e) {
        e.preventDefault();
        const target = document.querySelector(this.getAttribute('href'));
        if (target) {
            target.scrollIntoView({
                behavior: 'smooth',
                block: 'start'
            });
        }
    });
});
</script>
{% endblock %}